<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Sentence Tokenization</title>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"></script>

<style id="css">
    g.type-TK > rect {
        fill: #00ffd0;
    }

    text {
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        font-size: 14px;
    }

    .node rect {
        stroke: #999;
        fill: #fff;
        stroke-width: 1.5px;
    }

    .edgePath path {
        stroke: #333;
        stroke-width: 1.5px;
    }
</style>
<svg id="svg-canvas" width=960 height=600></svg>

<script>
    var g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function () {
        return {};
    });
    g.setNode(0, {
        label: "提交订单\\n订单编号：{{ pay_order_info.order_number }}\\n会员姓名：{{ member_info.nickname }}\\n订单总价：{{ pay_order_info.total_price }}\\n订单状态：{{ pay_order_info.status_desc }}\\n创建时间：{{ pay_order_info.created_time }}\\n收货地址：{{ address_info.nickname }}，{{ address_info.mobile }}，{{ address_info.address }}",
        class: "type",
        id: "Node0"
    });
    g.setNode(1, {label: "已付款，商家发货", class: "type", id: "Node1"});
    g.setNode(3, {label: "商家已发货", class: "type", id: "Node3"});
    g.setNode(4, {label: "商家发货\\n发货时间：{{ pay_order_info.express_time }}", class: "type", id: "Node4"});
    g.setNode(5, {label: "用户已确认收货", class: "type", id: "Node5"});
    g.setNode(6, {label: "交易完成", class: "type", id: "Node6"});
    g.setNode(7, {label: "未付款\\n订单截止时间：{{ pay_order_info.deadline }}", class: "type", id: "Node7"});
    g.setNode(8, {label: "已过待付款时效", class: "type", id: "Node8"});
    g.setNode(9, {label: "未过待付款时效", class: "type", id: "Node9"});
    g.setNode(10, {label: "取消订单，关闭交易", class: "type", id: "Node10"});
    g.setNode(11, {label: "用户取消订单", class: "type", id: "Node11"});
    g.setNode(12, {label: "用户付款\\n付款时间：{{ pay_order_info.pay_time }}", class: "type", id: "Node12"});
    g.setNode(13, {label: "商家未发货", class: "type", id: "Node13"});
    g.setNode(14, {label: "用户未确认收货", class: "type", id: "Node14"});
    g.setNode(15, {label: "用户确认收货\\n确认时间：{{ pay_order_info.confirm_time }}", class: "type", id: "Node15"});
    g.setNode(16, {label: "用户未评价", class: "type", id: "Node16"});
    g.setNode(17, {label: "用户评价\\n评价时间：{{ comment_info.created_time }}", class: "type", id: "Node17"});
    g.setNode(18, {label: "用户已评价", class: "type", id: "Node18"});
    g.nodes().forEach(function (v) {
        var node = g.node(v);
        node.rx = node.ry = 5;
    });

    g.setEdge(3, 5);
    g.setEdge(1, 3);
    g.setEdge(0, 7);
    g.setEdge(18, 6);
    g.setEdge(8, 10);
    g.setEdge(7, 9);
    g.setEdge(11, 10);
    g.setEdge(9, 11);
    g.setEdge(9, 12);
    g.setEdge(7, 8);
    g.setEdge(12, 1);
    g.setEdge(12, 1);
    g.setEdge(12, 13);
    g.setEdge(13, 4);
    g.setEdge(4, 3);
    g.setEdge(3, 14);
    g.setEdge(14, 15);
    g.setEdge(15, 5);
    g.setEdge(5, 16);
    g.setEdge(5, 18);
    g.setEdge(16, 17);
    g.setEdge(17, 18);

    var render = new dagreD3.render();

    var svg = d3.select("svg"),
        svgGroup = svg.append("g");

    render(d3.select("svg g"), g);

    var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
    svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
    svg.attr("height", g.graph().height + 40);
</script>
<script type="text/javascript">
    var a = "{{ pay_order_info.status_desc }}"
    if (a == "订单关闭") {
        document.getElementById('Node10').setAttribute("class", "type-TK");
    } else if (a == "支付成功") {
        document.getElementById('Node6').setAttribute("class", "type-TK");
    } else if (a == "待支付") {
        document.getElementById('Node7').setAttribute("class", "type-TK");
    } else if (a == "待发货") {
        document.getElementById('Node13').setAttribute("class", "type-TK");
        window.alert(b);
    } else if (a == "待确认") {
        document.getElementById('Node14').setAttribute("class", "type-TK");
    } else if (a == "待评价") {
        document.getElementById('Node6').setAttribute("class", "type-TK");
    }

</script>